<template>
  <div class="app-contain">
    <!-- 第一行 -->
    <div class="two">
      <el-row>
        <el-col :span="2"><div></div></el-col>
        <el-col :span="20">
          <div class="two_left">
            <div>
              <span>需求发布</span>
            </div>
          </div>

          <div class="two_right">
            <br />
            <br />
            所属类目:
            <el-radio-group v-model="radio" size="mini">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="我的需求"></el-radio-button>
              <el-radio-button label="类目二"></el-radio-button>
              <el-radio-button label="类目三"></el-radio-button>
              <el-radio-button label="类目四"></el-radio-button>
              <el-radio-button label="类目五"></el-radio-button>
              <el-radio-button label="类目六"></el-radio-button>
              <el-radio-button label="类目七"></el-radio-button>
              <el-radio-button label="类目八"></el-radio-button>
            </el-radio-group>
            <hr />
            <span>其他选项:</span>
            培训名称:<el-input
              v-model="itemtitle"
              size="mini"
              placeholder="请输入内容"
              style="width: 20%"
            ></el-input>
            培训状态:<el-input
              v-model="itemstatus"
              size="mini"
              placeholder="请输入内容"
              style="width: 20%; maigin-left: 20px"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="2"><div></div></el-col>
      </el-row>
    </div>
    <!-- 第二行 -->
    <div class="three">
      <el-row>
        <el-col :span="5" style="margin-left: 75px">
          <div class="three_left">
            <div>
              <h1>我的待办</h1>
              <br />
              <span> 我的收集</span>
              <hr />
              <span> 需求反馈</span>
              <hr />
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="demand">
            
            <el-table
                :data="tableData"
                border
                style="width: 80%">
                <el-table-column
                fixed
                prop="demandtitle"
                label="需求标题"
                width="250"
                height="130">
                </el-table-column>
                <el-table-column
                prop="department"
                label="需求部门"
                width="120">
                </el-table-column>
                <el-table-column
                prop="status"
                label="状态"
                width="100">
                </el-table-column>
                <el-table-column
                prop="data"
                label="发起时间"
                width="130">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
                </el-table-column>
            </el-table>
             
          </div>
        </el-col>
        <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  el: ".app-contain",
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
  data() {
    return {
      radio: "全部",
      itemtitle: "",
      itemstatus: "",
      tableData: [
        {
          demandtitle: "2018年人力资源部人员培训需求",
          department: "人力资源部",
          date: "2019/01/01 14:00",
        },
        {
          demandtitle: "2018年人力资源部人员培训需求",
          department: "人力资源部",
          date: "2019/01/01 14:00",
        }
      ],
      
    };
  },
};
</script>

<style>
.app-contain {
  width: 100%;
  height: 2000px;
  background-color: ghostwhite;
}
.el-breadcrumb {
  font-size: 20px;
  line-height: 4;
}
.two {
  clear: both;
  margin-top: 50px;
}
.two_left {
  float: left;
  margin-left: 75px;
  width: 300px;
  height: 150px;
  background-color: deeppink;
}
.two_right {
  float: left;
  background-color: white;
  width: 705px;
  height: 150px;

  margin-left: 10px;
}
.three {
  clear: both;
  height: auto;
}
.three_left {
  background-color: white;
  float: left;
  width: 300px;
  height: auto;
  margin-top: 20px;
}
.button {
  float: right;
  margin-top: -13px;
  margin-right: 10px;
  width: 130px;
  height: 80px;
  font-size: 1.5em;
}
.description {
  float: left;
  margin-top: 10px;
  margin-left: 50px;
}
.men {
  font-size: 40px;
  letter-spacing: 10px;
  position: absolute;
  top: 50%;
  left: 30%;
}
#words {
  margin-top: 1.67em;
  margin-left: 120px;
}
.teo_left {
  height: 100%;
  background-color: yellow;
  width: 300px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.two_left > div:first-child {
  width: 100%;
  height: 150px;
  font-size: 30px;
  color: #fff;
  position: relative;
  background-image: url(../../img/背景.jpg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demand {
    float:left;
    margin-left: 37px;
    margin-top: 20px;
  width: 883px;
}
</style>